<template>
  <div class="common-warp wh100 warp-bg">
    <div class="noo">
      <a-card title="设备信息">
        <!-- <template #extra><a href="#">more</a></template> -->
        <a-form ref="formaRef" :model="state.forma" :rules=ruleas>
          <a-form-item label="设备名称" name="name">
            <a-input v-model:value="state.forma.name" />
          </a-form-item>
          <a-form-item label="设备序列号" name="code">
            <a-input v-model:value="state.forma.code" />
          </a-form-item>
          <a-form-item label="设备厂商" name="protoType">
            <a-select ref="select" v-model:value="state.forma.protoType">
              <a-select-option :value="3">宇视NVR</a-select-option>
              <a-select-option :value="4">IPC</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-card>

      <a-card title="设备信息" style="margin: 12px 0;">
        <a-form ref="formbRef" :model="state.formb" :rules=rulebs>
          <a-form-item label="账号" name="username">
            <a-input v-model:value="state.formb.username" />
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input v-model:value="state.formb.password" />
          </a-form-item>
          <a-form-item label="播放地址" name="playUrl">
            <a-input v-model:value="state.formb.playUrl" />
          </a-form-item>
          <a-form-item label="描述" name="remark">
            <a-input v-model:value="state.formb.remark" />
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <a-button type="primary" block @click="confirm(formaRef, formbRef)">提交</a-button>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import {

  useMonitorDeviceQueryApi,
  useMonitorDeviceUpdateApi
} from '@/api/index'
import { message } from 'ant-design-vue';

const router = useRouter()
const route = useRoute()
const formaRef = ref();
const formbRef = ref();

const ruleas = {
  name: [{ required: true, message: '请输入设备名称', trigger: 'change' }],
  code: [{ required: true, message: '请输入设备序列号', trigger: 'change' }],
};
const rulebs = {
  username: [{ required: true, message: '请输入账号', trigger: 'change' }],
  password: [{ required: true, message: '请输入密码', trigger: 'change' }],
  playUrl: [{ required: true, message: '请输入播放地址', trigger: 'change' }],
};

const useContenta = () => {
  return {
    code: "",
    name: "",
    protoType: 3,
  }
}

const useContentb = () => {
  return {

    username: "",
    password: "",
    playUrl: "",
    remark: "",

  }
}

const state = reactive({
  forma: useContenta(),
  formb: useContentb()
})

//根据路由参数搜索
const queryData = async (devcode: string) => {
  let { data: { code, name, protoType, setting: { username, password, playUrl, remark } } } = await useMonitorDeviceQueryApi({ code: devcode })
  state.forma = {
    code,
    name,
    protoType
  }
  state.formb = {
    username,
    password,
    playUrl,
    remark
  }
}

//提交
const confirm = (formaRef: any, formbRef: any) => {
  if (!formaRef) return;
  if (!formbRef) return;
  formaRef.validate().then(async () => {
    formbRef.validate().then(async () => {

      await useMonitorDeviceUpdateApi({ ...state.forma, setting: { ...state.formb } })
      message.success("操作成功", 2);
      setTimeout(() => {
        router.push({ name: 'MonitorDev' })
      }, 2300)

    })
  })
};


onMounted(() => {
  document.title = '编辑'
  let { code }: any = route.query
  queryData(code)
})

</script>
<style scoped lang='less'>
.noo {
  height: calc(100vh - 56px);
  overflow-y: scroll;

  :deep(.ant-form-item-label) {
    padding: 0 !important;
  }

  :deep(.ant-card-body) {
    padding: 12px !important;
  }

  :deep(.ant-card-head) {
    padding: 12px !important;
  }

  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }

}
</style>